<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>农业物联网设备控制面板</title>

    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com "></script>

    <!-- WebSocket 支持 -->
    <script src="/socket.io/socket.io.js"></script>
</head>
<body class="bg-gray-100 min-h-screen p-6 font-sans">

    <!-- 导航栏占位 -->
    <div id="navbar" class="mb-6"></div>
    <script>
        fetch('/static/nav.html')
            .then(response => response.text())
            .then(data => {
                document.getElementById('navbar').innerHTML = data;
            })
            .catch(err => console.error('无法加载导航栏:', err));
    </script>

    <!-- 页面标题 -->
    <h1 class="text-3xl font-bold text-center text-gray-700 mb-8">设备控制面板</h1>

    <!-- 状态提示区域 -->
    <div id="status-message" class="text-center text-lg font-medium mb-6 text-green-600"></div>

    <!-- 控制面板容器 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">

        <!-- 灌溉系统 -->
        <div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-blue-500">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                灌溉系统
            </h3>
            <div class="flex flex-wrap gap-3">
                <button onclick="sendCommand('pump', '1')" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition duration-200">
                    打开水泵
                </button>
                <button onclick="sendCommand('pump', '0')" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded transition duration-200">
                    关闭水泵
                </button>
            </div>
        </div>

        <!-- 补光灯 -->
        <div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-yellow-500">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                补光灯
            </h3>
            <div class="flex flex-wrap gap-3">
                <button onclick="sendCommand('light', '1')" class="bg-yellow-400 hover:bg-yellow-500 text-white px-4 py-2 rounded transition duration-200">
                    打开补光灯
                </button>
                <button onclick="sendCommand('light', '0')" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded transition duration-200">
                    关闭补光灯
                </button>
            </div>
        </div>

        <!-- 风扇/通风系统 -->
        <div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-green-500">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                风扇/通风系统
            </h3>
            <div class="flex flex-wrap gap-3">
                <button onclick="sendCommand('fan', '1')" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded transition duration-200">
                    启动风扇
                </button>
                <button onclick="sendCommand('fan', '0')" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded transition duration-200">
                    关闭风扇
                </button>
            </div>
        </div>

        <!-- 模式选择 -->
        <div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-indigo-500">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                自动化模式
            </h3>
            <div class="flex flex-wrap gap-3">
                <button onclick="sendCommand('mode', 'auto')" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded transition duration-200">
                    启用自动模式
                </button>
                <button onclick="sendCommand('mode', 'manual')" class="bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded transition duration-200">
                    切换为手动模式
                </button>
            </div>
        </div>

        <!-- 其他扩展设备（可选） -->
        <div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-teal-500">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                温控设备
            </h3>
            <div class="flex flex-wrap gap-3">
                <button onclick="sendCommand('heater', '1')" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded transition duration-200">
                    开启加热器
                </button>
                <button onclick="sendCommand('heater', '0')" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded transition duration-200">
                    关闭加热器
                </button>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-pink-500">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                遮阳帘
            </h3>
            <div class="flex flex-wrap gap-3">
                <button onclick="sendCommand('curtain', '1')" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded transition duration-200">
                    打开遮阳帘
                </button>
                <button onclick="sendCommand('curtain', '0')" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded transition duration-200">
                    关闭遮阳帘
                </button>
            </div>
        </div>

    </div>

    <!-- WebSocket 实时状态监听 -->
    <script>
        const socket = io();

        socket.on('connect', () => {
            console.log("WebSocket 已连接");
        });

        socket.on('device_status', function(data) {
            const statusDiv = document.getElementById('status-message');
            statusDiv.textContent = `设备 ${data.device} 状态更新为: ${data.status}`;
            setTimeout(() => { statusDiv.textContent = ''; }, 3000); // 3秒后清空
        });
    </script>

    <!-- 控制命令发送函数 -->
    <script>
        function sendCommand(device, command) {
            fetch('/control_data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ device, command })
            })
            .then(response => {
                if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
                return response.json();
            })
            .then(data => {
                const statusDiv = document.getElementById('status-message');
                if (data.error) {
                    statusDiv.textContent = "发送失败: " + data.error;
                } else {
                    statusDiv.textContent = "已发送命令：" + data.payload;
                }
                setTimeout(() => { statusDiv.textContent = ''; }, 3000);
            })
            .catch(error => {
                console.error("发送失败:", error);
                const statusDiv = document.getElementById('status-message');
                statusDiv.textContent = "发送命令失败，请检查网络连接";
                setTimeout(() => { statusDiv.textContent = ''; }, 3000);
            });
        }
    </script>

</body>
</html>